<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>明细页面</title>
    <script type="application/javascript" src="../static/lib/vue.js"></script>
    <script type="application/javascript" src="../static/lib/axios.min.js"></script>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css" tppabs="../lib/layui/css/layui.css" media="all">
    <style>
        table, table tr th, table tr td {
            border: 1px solid #0094ff;
        }

        table {
            width: 100%;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
        }
        th{
            background-color: #00f7de;
        }
        tr{
            background-color: rgba(247, 202, 0, 0.83);
        }
    </style>
</head>
<body>
<div id="app-sg-detail"><h1>每局明细</h1>
    <h1>房间-信息：{{roomInfo.name}}-{{roomInfo.no}}</h1>
    <ul>
        <li v-for="playDetail in playDetailList">

            <div>
                <table>
                    <thead>回合编号：{{playDetail.roundNo}}</thead>
                    <tbody>
                    <tr>
                        <th>
                            姓名
                        </th>
                        <th>
                            是否做庄
                        </th>

                        <th>
                            点数
                        </th>
                        <th>
                            所压的筹码
                        </th>
                        <th>
                            本轮获得积分
                        </th>
                        <th>
                            当前积分

                        </th>
                        <th>
                            最终积分
                        </th>
                    </tr>
                    <tr v-for="playRecord in playDetail.userPlayRecordList">
                        <td>{{playRecord.userName}}
                        <td v-if="playRecord.isHead">
                            是
                        </td>
                        <td v-else>
                            否
                        </td>


                        <td>{{playRecord.score.name}}</td>
                        <td>{{playRecord.chip}}</td>
                        <td>{{playRecord.roundGetCredit}}</td>
                        <td>{{playRecord.currentCredit}}</td>
                        <td>{{playRecord.afterCredit}}</td>

                    </tr>
                    </tbody>
                </table>
            </div>

        </li>
    </ul>
</div>

</body>
<script>


    var apps = new Vue({
        el: "#app-sg-detail",
        methods: {

            playDetailListFunction: function () {
                {
                    var that = this;
                    var param = that.getParam();
                    that.roomInfo.no = param['roomNo']
                    that.roomInfo.name = decodeURI(param['roomName'])

                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/sangong/room/getPlayRecord',
                        data: {
                            roomNo: that.roomInfo.no/*,
                            roundNo: that.roomInfo.roundNo*/
                        },
                        responseType: 'json'
                    }).then(function (response) {
                        if (!response.data.success) {
                            alert(response.data.errorMsg);
                            return;
                        }
                        that.playDetailList = response.data.data;


                    }, function (error) {
                        console.log(error)
                    });
                }
            }, getParam: function () {
                {
                    var url = location.search; //获取url中"?"符后的字串
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                }
            }
        },
        data: {
            roomInfo: {},
            playDetailList: []


        }
        ,
        mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
            // we can implement any method here like
            this.playDetailListFunction()
        }
    });
</script>
</html>